<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 聊天室</title>
    <link rel="stylesheet" href="style.css">
    <!-- 引入 CloudBase JavaScript SDK -->
    <script src="https://imgcache.qq.com/qcloud/tcbjs/1.10.2/tcb.js"></script>
</head>
<body>
    <div class="chat-container">
        <!-- 聊天设置区域 -->
        <div class="chat-settings">
            <h2>设置</h2>
            <div class="setting-item">
                <label for="api-url">API 地址</label>
                <input type="text" id="api-url" placeholder="请输入 API 地址">
            </div>
            <div class="setting-item">
                <label for="api-key">API 密钥</label>
                <input type="password" id="api-key" placeholder="请输入 API 密钥">
            </div>
            <div class="setting-item">
                <label for="model">模型名称</label>
                <input type="text" id="model" placeholder="请输入模型名称"> <!-- 修改为输入框 -->
            </div>
            <button id="apply-settings">应用设置</button>
        </div>
        <!-- 聊天主区域 -->
        <div class="chat-main">
            <div class="chat-history" id="chat-history">
                <!-- 聊天消息会显示在这里 -->
            </div>
            <div class="chat-input">
                <input type="text" id="user-input" placeholder="输入消息...">
                <button id="send-button">发送</button>
            </div>
        </div>
    </div>
    <script src="chat.js"></script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function () {
                navigator.serviceWorker.register('service-worker.js')
                   .then(function (registration) {
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                    })
                   .catch(function (err) {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
</body>
</html>
